<template>
  <div>
<Card style="height: 546px;">

  <p class="title">程序员需求人数</p>
  <div class="header row">
    <span class="col col-1">时间</span>
    <span class="col col-2">地址</span>
    <span class="col col-1">需求人数</span>
  </div>
  <div class="content" ref="contentRef">
      <div class="content-wrap" ref="contentWrapRef"
      :style="{ transform: `translateY(${transformY}px)` }">
        <div class="row" v-for="item in list" :key="item.id">
          <div class="col col-1">{{ item.date }}</div>
          <div class="col col-2">{{ item.address }}</div>
          <div class="col col-1">{{ item.num }}</div>
        </div>
      </div>
      </div>

</Card>
  </div>
</template>

<script setup lang="ts">
import Card from '../../components/Card/index.vue'
import createWebSocket from '../../utils/web-socket'
import {onMounted, ref} from 'vue'
import MySocket from '@/utils/websocket'
const list=ref([]);


// onMounted(async()=>{
//   const socket=await createWebSocket();
//   socket.addEventListener('message',(e)=>{
//     const arr=JSON.parse(e.data);
//     list.value=list.value.concat(arr);
//     if(list.value.length>=20){
//       start()
//     }
//   })
// });


//心跳监测版本

onMounted(()=>{
  new MySocket((e)=>{
    if(e.data==='pong')return;
    const data=JSON.parse(e.data);
    list.value=list.value.concat(data);
    if(list.value.length>=20){
      start();
    }
  })
})


const transformY=ref(0);
const contentRef=ref();
const contentWrapRef=ref();
let timer=null;
function start(){
  if(timer){
    clearInterval(timer)
  };
  timer=setInterval(()=>{
    let y=transformY.value;
    y-=0.5;
    //能滚动的最大值
    const max=contentWrapRef.value.clientHeight-contentRef.value.clientHeight;
    //如果已经滚动到最大值或者超过最大值，停止滚动（清除定时器）
    if(-y>=max){
      clearInterval(timer);
      timer=null;
    }else{
      transformY.value=y;
    }
  },1000/60);
}





</script>

<style scoped>
.title {
  text-align: center;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  margin: 10px 0;
}

.header {
  margin: 0 10px;
  background-color: rgba(255, 255, 255, 0.1);
  .col {
    color: #68d8fe;
  }
}

.content {
  margin: 0 10px;
  height: calc(100% - 68px);
  overflow: hidden;
}
.row {
  display: flex;
  padding: 4px 0;
  &:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #68d8fe;
  }
  .col {
    color: #fff;
    text-align: center;
    font-size: 12px;
    color: #61a8ff;
    transform: scale(0.8);
  }
  .col-1 {
    flex: 1;
  }
  .col-2 {
    flex: 2;
  }
}

</style>